<template>
  <div class="input-box">

    <div class="flex flex-b">
      <el-input type="textarea" v-model="textObj.titObj.currentSituation" v-autoHeight="{textObj, top:'800px', left:'220px'}" placeholder="请输入内容1"></el-input>
      <el-input type="textarea" v-model="textObj.titObj.causeAnalysis" v-autoHeight="{textObj, top:'800px', left:'620px'}" placeholder="请输入内容2"></el-input>
    </div>

    <!-- <div class="flex flex-b">
      <textarea ref="textareaDom1" type="hidden"></textarea>
      <textarea ref="textareaDom2" type="hidden"></textarea>
    </div> -->
  </div>
</template>

<script>
import { debounce, throttle } from '@/utils'
export default {
  directives: {
    'autoHeight': {
      bind (el, data, vnode) {
        let tTop = '-9999px'
        let tLeft = '-9999px'

        const textObj = data.value.textObj
        if (data.hasOwnProperty('value') && data.value.hasOwnProperty('top')) {
          tTop = data.value.top
        }
        if (data.hasOwnProperty('value') && data.value.hasOwnProperty('left')) {
          tLeft = data.value.left
        }
        const textarea = el.tagName === 'TEXTAREA' ? el : el.querySelector('textarea');
        // debugger
        if (!textarea) return;

        // 计算字符中有多少个换行符
        function countNewlines (text) {
          const matches = text.match(/\r?\n/g)
          return matches ? matches.length : 0
        }

        function initTextDom () {
          let hiddenTextarea = el.hiddenTextarea
          if (!hiddenTextarea) {
            // 创建隐藏的 textarea 来测量高度
            el.hiddenTextarea = hiddenTextarea = document.createElement('textarea')
            // hiddenTextarea.id = domId;
            hiddenTextarea.style.position = 'absolute'
            hiddenTextarea.style.top = tTop
            hiddenTextarea.style.left = tLeft
            hiddenTextarea.style.zIndex = 10
            hiddenTextarea.style.backgroundColor = '#eee'
            const style = getComputedStyle(textarea)
            // console.log('style.fontSize', style.fontSize)
            // console.log('style.fontFamily', style.fontFamily)
            // console.log('style.padding', style.padding)
            // console.log('style.border', style.border)
            // console.log('style.lineHeight', style.lineHeight)
            // console.log('style.height', style.height)
            hiddenTextarea.style.fontSize = style.fontSize || '12px'
            hiddenTextarea.style.fontFamily = style.fontFamily
            hiddenTextarea.style.padding = style.padding
            hiddenTextarea.style.border = style.border
            hiddenTextarea.style.lineHeight = style.lineHeight || '18px'
            hiddenTextarea.style.height = style.height || '34px'
            hiddenTextarea.style.resize = 'none'
            document.body.appendChild(hiddenTextarea)
            pollingSetTextWidth(hiddenTextarea, textarea)
            textObj.doms.push(hiddenTextarea)
            const propName = textarea.propName = data.value.propName
            hiddenTextarea.value = textObj[propName] // 首次赋值
          } else {
            hiddenTextarea.value = textarea.value
          }
          // 通知其他输入框更新高度
          const event = new CustomEvent('height-update', {});
          window.dispatchEvent(event);
        }

        // 监听输入事件
        textarea.addEventListener('input', throttle(() => {
          initTextDom()
        }));

        // 监听其他输入框的高度更新
        window.addEventListener('height-update', (e) => {
          updateHeight(e)
        });

        function updateHeight (e) {
          // debugger
          // console.log('')
          let maxHeight = 0
          textObj.doms.forEach(dom => {
            const text = dom.value
            const linesNum = countNewlines(text) // 每多一个换行符，高度加15
            let disH = linesNum * 0.6
            if (linesNum <= 0) {
              disH = ('' + text.length) * 0.6
            }
            const scrollH = dom.scrollHeight + disH
            // console.log('disH', disH)
            // console.log('dom', dom)
            // console.log(scrollH, 'dom.value: ', dom.value)
            maxHeight = Math.max(maxHeight, scrollH)
            // debugger
          })

          // console.log('maxHeight', maxHeight)
          textarea.style.height = maxHeight + 'px'
          // debugger
        }

        // 轮询设置宽度
        function pollingSetTextWidth (el, textarea) {
          const tWidth = textarea.offsetWidth
          // debugger
          if (tWidth <= 0) {
            setTimeout(() => {
              pollingSetTextWidth(...arguments)
            }, 500)
          } else {
            el.style.width = tWidth + 'px'
          }
        }

        // 初始化高度
        initTextDom();
      }
    }
  },
  data () {
    return {
      tableIndex: 0,
      textObj: {
        doms: [],
        titObj: {
          currentSituation: '',// 现状描述
          causeAnalysis: '' // 原因分析
        }
      }
    };
  },
  methods: {
    changeTxt (fnType, tableIndex, data) {

    }
  }
};
</script>
<style lang="scss">
.input-box {
  // > div > textarea,
  .el-textarea {
    width: 48%;
  }
}
</style>